import React, {useState} from 'react'
import {Menu} from "antd";
import {changeTabNavType} from "views/home";
import styled from "@emotion/styled";
import {useAuth} from "utils";
import './nav.less'

export default function TabNav(props: {
    list: Array<any>,
    changeTabNav: changeTabNavType
}) {
    const {list, changeTabNav} = props
    const {user} = useAuth()
    const [selectedKeys, setSelectedKeys] = useState(['grid'])
    const items = list.map((item) => item.isShow !== false ? {
            key: item.code,
            label: item.name,
        } : null
    )

    return (<>
            <Menu
                className='tabNav'
                mode="horizontal"
                items={items}
                selectedKeys={selectedKeys}
                onClick={({key}) => {
                    changeTabNav(key)
                    setSelectedKeys([key])
                }}
            />
            {/*<Dropdown*/}
            {/*    overlay={*/}
            {/*        <Menu*/}
            {/*            style={{*/}
            {/*                width: '20rem'*/}
            {/*            }}*/}
            {/*            items={[*/}
            {/*                {*/}
            {/*                    label: <Button>个人中心</Button>,*/}
            {/*                    key: "logout",*/}
            {/*                    // onClick: logout,*/}
            {/*                },*/}
            {/*                {*/}
            {/*                    label: <Button>登出</Button>,*/}
            {/*                    key: "logout",*/}
            {/*                    // onClick: logout,*/}
            {/*                },*/}
            {/*            ]}*/}
            {/*        />*/}
            {/*    }*/}
            {/*>*/}
            <ContainRight>
                {user.name}
            </ContainRight>
            {/*</Dropdown>*/}
        </>
    );
}
// extra={
// <Space>
//     <Button onClick={onClose}>取消</Button>
//     <Button type="primary" onClick={onClose}>
//         提交
//     </Button>
// </Space>
// }

const ContainRight = styled.div`
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  //color: rgba(255, 255, 255, 0.65);
  color: #333;
  cursor: pointer !important;
  background-color: #fefefe;
`